<template>
	<div>
		<div class="voucher_center_wrap">
			<el-row :gutter="24">
				<el-col class="t_center money_wrap" :span="12">
					<div class="item_up">
						余额
					</div>
					<div class="item_down">
						{{balance}} 元
					</div>
				</el-col>
				<el-col class="t_center money_wrap" :span="12">
					<div class="item_up">
						可发短信
					</div>
					<div class="item_down">
						{{smsCount}} 条
					</div>
				</el-col>
			</el-row>
			<el-row class="padding_top" :gutter="24">
				<el-col class="c_t" :span="24">
					选择充值金额
				</el-col>
				<el-col :span="24">
					<el-col class="c_num_wrap" :span="8">
						<div @click="selectMoneyNum(1)" class="c_num">
							100
						</div>
						<div v-if="active == 1" class="r_s">
						</div>
					</el-col>
					<el-col class="c_num_wrap" :span="8">
						<div @click="selectMoneyNum(2)" class="c_num">
							200
						</div>
						<div v-if="active == 2" class="r_s">
						</div>
					</el-col>
					<el-col class="c_num_wrap" :span="8">
						<div @click="selectMoneyNum(3)" class="c_num">
							<span v-if="active != 3">
								其他金额
							</span>
							<el-input v-if="active == 3" v-model="amount" type="number" placeholder="请输入金额数" style="width: 50%;"></el-input>
						</div>
						<div v-if="active == 3" class="r_s">
						</div>
					</el-col>
				</el-col>
			</el-row>
			<el-row class="padding_top" :gutter="24">
				<el-col class="c_t" :span="24">
					选择支付方式
				</el-col>
				<el-col :span="24">
					<el-col class="c_num_wrap" :span="12">
						<div @click="selectMethodsType(21)" class="c_num">
							支付宝
						</div>
						<div v-if="methodsType == 21" class="r_s">

						</div>
					</el-col>
					<el-col class="c_num_wrap" :span="12">
						<div @click="selectMethodsType(11)" class="c_num">
							微信
						</div>
						<div v-if="methodsType == 11" class="r_s">

						</div>
					</el-col>
				</el-col>
			</el-row>
			<el-row>
				<el-col style="text-align: center; padding: 50px;">
					<el-button @click="VoucherBtn" type="primary" class="voucherBtn">立即充值</el-button>
				</el-col>
			</el-row>
		</div>
		<!--扫码弹窗-->
		<el-dialog title="扫码支付" :visible.sync="erWeiMa.dialogFormVisible" center width="400px"  :show-close=false :close-on-click-modal=false>
			<div class="erweima_wrap">
				<!--<img :src="erWeiMa.codeUrl" />-->
				<div v-html="qrcodeHtml" id="qrcode" ref="qrcode" style="width: 200px;margin: 0 auto;"></div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="reload()" type="primary" style="width: 90;">取消</el-button>
				<el-button @click="reload()" type="primary" style="width: 90;">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				qrcodeHtml: '',
				balance: '', //余额
				smsCount: '', //剩余可发短信数
				active: 1,
				methodsType: 11,
				amount: 100,
				erWeiMa: {
					dialogFormVisible: false,
					codeUrl: '',
				}
			}
		},
		created() {
			this.fetchData();
		},
		methods: {
			fetchData() {
				let that = this;
				that.apiGet("/api/backend/account/site/current").then(res => {
					if(res.code == 200) {
						that.smsCount = res.data.smsCount
						that.balance = res.data.balance
					}
				})
			},
			selectMoneyNum(num) {
				this.active = num
				switch(num) {
					case 1:
						this.amount = 100
						break;
					case 2:
						this.amount = 200
						break;
					default:
						break;
				}
			},
			selectMethodsType(num) {
//				if(num == 21) {
//					this.$message({
//						type: 'info',
//						message: '暂未开放'
//					})
//					return false;
//				}
				this.methodsType = num
			},
			VoucherBtn() {
				let that = this;
				that.apiPost("/api/backend/account/charge", {
					amount: that.amount,
					type: that.methodsType
				}).then(res => {
					if(res.code == 200) {
						that.erWeiMa.dialogFormVisible = true
						setTimeout(function() {
							that.qrcode(res.data.result.codeUrl)
						}, 100)
					}
				})
			},
			qrcode(codeUrl) {
				let qrcode = new QRCode('qrcode', {
					width: 200, // 设置宽度，单位像素
					height: 200, // 设置高度，单位像素
					text: codeUrl // 设置二维码内容或跳转地址
				})
			},
			reload() {
				let that = this;
				that.$router.go(0);
			}

		},
		mixins: [http]
	}
</script>
<style scoped>
	.voucher_center_wrap {
		padding: 40px 100px;
		padding-bottom: 100px;
	}
	
	.t_center {
		text-align: center;
	}
	
	.money_wrap .item_up {
		font-size: 14px;
		line-height: 30px;
	}
	
	.money_wrap .item_down {
		font-size: 22px;
		font-weight: bold;
	}
	
	.c_num_wrap {
		position: relative;
	}
	
	.c_num_wrap .c_num {
		background: #FFFFFF;
		border: 1px solid #999;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}
	
	.padding_top {
		padding-top: 20px;
	}
	
	.c_t {
		line-height: 80px;
	}
	
	.c_num_wrap .r_s {
		border-width: 40px;
		border-style: solid;
		border-color: #66b1ff #fff #fff #66b1ff;
		position: absolute;
		left: 12px;
		top: 0;
	}
	
	.voucherBtn {
		width: 80%;
		height: 50px;
		font-size: 23px;
	}
</style>